<template>
  <div>
    <!-- tab基本信息表单  -->
    <el-scrollbar style="height: 100%">
      <vxe-toolbar perfect>
        <template #buttons>
          <vxe-button type="text" class="button-blue" icon="vxe-icon-square-plus" content="新建" @click="addNew"></vxe-button>
          <vxe-button type="text" icon="vxe-icon-save" content="保存" :loading="saveLoading" class="button-blue margin-left-sm" @click="saveEvent"></vxe-button>
        </template>
      </vxe-toolbar>
      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="110px" inline-message>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="TAT监控节点编码" prop="tatNodeNo">
              <el-input v-model="formData.tatNodeNo" placeholder="TAT监控节点编码" clearable :disabled="formData.isSysAtt === true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="起始节点" prop="nodeStartNa">
              <!-- <el-input v-model="formData.nodeStartNa" placeholder="起始节点" clearable :disabled="formData.isSysAtt === true"></el-input> -->
              <VxePulldownSelectionWithNa style="width: 100%" :url="'/lab/process/set/getProcessSetList'" @confirmClick="SelectRowClick" :tableColumn="[
                          { type: 'seq', title: '#', width: '30px' },
                          { field: 'code', title: '编码' },
                          { field: 'nodeName', title: '名称' }
                        ]" :aimKeys="[
                          { aimKey: 'nodeStartNo', rowKey: 'code' },
                          { aimKey: 'nodeStartNa', rowKey: 'nodeName' }
                        ]" :displayTexts="['nodeStartNa']" :dataObj="{isTat:true}" :displayTextObj="formData.nodeStartNa ? formData.nodeStartNa : ''" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="终止节点" prop="nodeEndNa">
              <!-- <el-input v-model="formData.nodeEndNa" placeholder="终止节点" clearable :disabled="formData.isSysAtt === true"></el-input> -->
              <VxePulldownSelectionWithNa style="width: 100%" :url="'/lab/process/set/getProcessSetList'" @confirmClick="SelectRowClick" :tableColumn="[
                          { type: 'seq', title: '#', width: '30px' },
                          { field: 'code', title: '编码' },
                          { field: 'nodeName', title: '名称' }
                        ]" :aimKeys="[
                          { aimKey: 'nodeEndNo', rowKey: 'code' },
                          { aimKey: 'nodeEndNa', rowKey: 'nodeName' }
                        ]" :displayTexts="['nodeEndNa']" :dataObj="{isTat:true}" :displayTextObj="formData.nodeEndNa ? formData.nodeEndNa : ''" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="TAT监控节点名称" prop="tatNodeNa">
              <el-input v-model="formData.tatNodeNa" placeholder="TAT监控节点名称" clearable :disabled="formData.isSysAtt === true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <div class="text-red text-bold margin-bottom-xs" style="margin-left:112px">节点到节点允许的最小时间，最大时间限制。设置为(0/空)为不启用</div>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="最小时间" prop="minTime">
              <el-input-number style="width:100%" v-model="formData.minTime" :min="0" :max="10000000" />
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <span>分钟</span>
          </el-col>
          <el-col :span="10">
            <el-form-item prop="maxTime" label="最大时间">
              <el-input-number style="width:100%" v-model="formData.maxTime" :min="0" :max="10000000" />
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <span>分钟</span>
          </el-col>
        </el-row>
        <el-row>
          <div class="text-red text-bold margin-bottom-xs" style="margin-left:112px">节点到节点,超过__分钟开始预警提醒，超过__分钟开始警告提醒。设置为(0/空)为不启用</div>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="预警时间" prop="prewarnTime">
              <el-input-number style="width:100%" v-model="formData.prewarnTime" :min="0" :max="10000000" />
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <span>分钟</span>
          </el-col>
          <el-col :span="10">
            <el-form-item label="警告时间" prop="warnTime">
              <el-input-number style="width:100%" v-model="formData.warnTime" :min="0" :max="10000000" />
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <span>分钟</span>
          </el-col>
        </el-row>
      </el-form>
    </el-scrollbar>
  </div>
</template>

<script lang="ts" setup>
// 引入组件区 ==========
import { ref, reactive, onMounted, getCurrentInstance, watch, PropType } from 'vue';
import { VXETable, VxeFormPropTypes, VxeButtonEvents } from 'vxe-table';
import { VxeMessage, VxeNotifyType } from '../../../utils/CommonMessage';
import { AppStore } from '../../../stores/store';
import { funBdsJsResult } from '@/utils/Expression'; //函数公式
import SelectDataList from '@/components/SelectDataList.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import VxePulldownSelectionWithNa from '@/components/VxePulldownSelectionWithNa.vue';
import { formatDateTime } from '@/utils/common';
let store = AppStore();
// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();

let showInterface = ref(false); //是否有界面
let showProcessAttValue = ref(false); //是否标本退回
let saveLoading = ref(false);/**是否加载 */
const formRef = ref(null); //表单ref标记
// 表单绑定的数据
let formData = reactive({
  id: '' /*主键*/,
  tatNodeNo: '' /*TAT监控节点编号*/,
  tatNodeNa: '' /*TAT监控节点名称*/,
  nodeStartNo: '' /*TAT开始节点编号*/,
  nodeEndNo: '' /*TAT结束节点编号*/,
  nodeStartNa: '' /*TAT开始节点名称*/,
  nodeEndNa: '' /*TAT结束节点名称*/,
  minTime: 0 /*最小时间*/,
  maxTime: 0 /*最大时间*/,
  prewarnTime: 0 /*预警时间*/,
  warnTime: 0 /*警告时间*/,
  seq: 1 /*序号*/,
  isEnable: 1 /*是否启用*/
});

// 表单校验规则
const formRules = reactive<VxeFormPropTypes.Rules>({
  code: [{ required: true, message: '请输入编码' }],
  nodeName: [{ required: true, message: '请输入名称' }]
});

//暴露属性和方法
defineExpose({
  initPage,
  addNew,
  clearFormData
});

onMounted(() => {
  addNew();
});

// 方法定义区 =============
function initPage(row) {
  if (!row || IsEmpty(row.id)) {
    addNew();
    return;
  }
  clearFormData();
  Object.assign(formData, row);
}

/**新增 */
function addNew() {
  clearFormData(); // 清空表单
}

//**判断为空*/
function IsEmpty(value: any) {
  if (value === undefined || value === '' || value === null) {
    return true;
  }
  if (JSON.stringify(value) === '{}') {
    return true;
  }
  return false;
}

//是否有界面
function switIsInterfaceCreatReceipt(val) {
  //暂无业务逻辑
  if (!val) {
    formData.nodeUrl = '';
    formData.nodeUrlName = '';
    formData.interfaceCode = '';
  }
}

//是否标本退回
function handleSwitchChange(val) {
  if (!val) {
    formData.rollbackValue = '';
  }
}

//选择界面
function selectRow(row) {
  formData.nodeUrl = row.url;
  formData.nodeUrlName = row.name;
  formData.interfaceCode = row.code;
}

//清空界面
function clearRow() {
  formData.nodeUrl = '';
  formData.nodeUrlName = '';
  formData.interfaceCode = '';
}

//选择功能
function genusCodeSelect(row) {
  formData.rollbackValue = row.value;
}

//清空功能
function genusCodeClear() {
  formData.rollbackValue = '';
}

// 清空表单
function clearFormData() {
  formData.id = '' /*主键*/;
  formData.tatNodeNo = formatDateTime(new Date(), 'yyMMddhhmmss'); /*TAT监控节点编号*/;
  formData.tatNodeNa = '' /*TAT监控节点名称*/;
  formData.nodeStartNo = '' /*TAT开始节点编号*/;
  formData.nodeEndNo = '' /*TAT结束节点编号*/;
  formData.nodeStartNa = '' /*TAT开始节点名称*/;
  formData.nodeEndNa = '' /*TAT结束节点名称*/;
  formData.minTime = 0 /*最小时间*/;
  formData.maxTime = 0 /*最大时间*/;
  formData.prewarnTime = 0 /*预警时间*/;
  formData.warnTime = 0 /*警告时间*/;
  formData.seq = 1 /*序号*/;
  formData.isEnable = 1 /*是否启用*/;
}

const openPage = () => {
  ElMessageBox.alert('请选择界面', '提示', {
    confirmButtonText: '确定'
  });
};
const openFunc = () => {
  ElMessageBox.alert('请选择功能', '提示', {
    confirmButtonText: '确定'
  });
};

/**新建事件 */
function saveEvent() {
  const el: any = proxy.$refs['formRef'];
  formRef.value?.validate((valid: any) => {
    if (!valid) {
      VxeMessage('校验表单失败', VxeNotifyType.error);
      return false;
    }
    let url = '';
    // 判断添加和编辑接口
    if (IsEmpty(formData.id)) {
      url = '/api/lab-tat-node/addLabTatNode';
    } else {
      url = '/api/lab-tat-node/updateLabTatNode';
    }

    proxy.$http
      .post(url, formData)
      .then((res: any) => {
        if (res.status.code === 1) {
          if (!IsEmpty(formData.id)) {
            proxy.$emit('findList');
            VxeMessage('修改成功', VxeNotifyType.success);
          } else {
            proxy.$emit('findList');
            VxeMessage('新增成功', VxeNotifyType.success);
          }
          if (callback) {
            callback(true);
          }
        } else {
          if (!IsEmpty(formData.id)) {
            proxy.$emit('findList');
            VxeMessage('修改失败', VxeNotifyType.error);
          } else {
            proxy.$emit('findList');
            VxeMessage('新增失败', VxeNotifyType.error);
          }
          if (callback) {
            callback(false);
          }
        }
      })
      .catch((err: any) => {
        console.log("接口异常", err);
      });
  });
}
/**节点选择改变 */
function SelectRowClick(e) {
  e.aimKeys.forEach((r) => {
    formData[r.aimKey] = e.row[r.rowKey];
  });

  if (!IsEmpty(formData.nodeStartNa) && !IsEmpty(formData.nodeEndNa) && IsEmpty(formData.tatNodeNa)) {
    formData.tatNodeNa = `${formData.nodeStartNa}→${formData.nodeEndNa}`;
  }
}
</script>

<style lang="scss" scoped>
// 中等尺寸时 配置扩展属性按钮
.el-button--default {
  padding: 5px 11px;
}

.el-tag {
  color: $base-white;
}
.error-message {
  color: red;
  margin: -9px 4px;
}
</style>
